<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>jQuery UI tabs integration demo</title>

    <link rel="stylesheet" type="text/css" media="screen"
          href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

    <script src="../../lib/jquery.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js" type="text/javascript"></script>
    <script src="../../jquery.validate.js" type="text/javascript"></script>

    <script id="demo" type="text/javascript">
        $(document).ready(function () {
            var tabs = $("#tabs").tabs();
            var validator = $("#signupform").validate({
                groups: {
                    birthdate: "birthdateDay birthdateMonth birthdateYear"
                },
                errorPlacement: function (label, element) {
                    if (/^birthdate/.test(element[0].name)) {
                        label.insertAfter("#birthdateYear");
                    } else {
                        label.insertAfter(element);
                    }
                }
            });

            // validate the other two selects when one changes to update the whole group
            var birthdaySelects = $("#birthdateGroup select").click(function () {
                birthdaySelects.not(this).valid();
            })

            // overwrite focusInvalid to activate tab with invalid elements
            validator.focusInvalid = function () {
                if (this.settings.focusInvalid) {
                    try {
                        var focused = $(this.findLastActive() || this.errorList.length && this.errorList[0].element || []).filter(":visible");
                        tabs.tabs("select", tabs.find(">div").index(focused.parent().parent()));
                        focused.focus();
                    } catch (e) {
                        // ignore IE throwing errors when focusing hidden elements
                    }
                }
            };
        });
    </script>

    <style>
        body {
            font-size: 65.2%
        }

        label {
            display: inline-block;
            width: 8em;
        }

        label.error {
            color: red;
            margin-left: 0.5em;
            width: 20em;
        }
    </style>

</head>
<body>

<form id="signupform">

    <div id="tabs">
        <ul>
            <li><a href="#logindata">Login data</a></li>
            <li><a href="#personaldata">Personal data</a></li>
            <li><a href="#subscriptions">Subscriptions</a></li>
        </ul>
        <div id="logindata">
            <p>
                <label for="username">Username</label>
                <input id="username" name="username" class="required" minlength="3" maxlength="20" type="text"/>
            </p>

            <p>
                <label for="email">Email address</label>
                <input id="email" name="email" class="required email" type="text"/>
            </p>

            <p>
                <label for="password">Password</label>
                <input name="password" type="password" class="required" id="password" minlength="4" maxlength="50"/>
            </p>

            <p>
                <label for="confirmpassword">Confirm Password</label>
                <input name="confirmpassword" type="password" class="required" equalTo="#password"
                       id="confirmpassword"/>
            </p>
        </div>
        <div id="personaldata">
            <p>
                <label for="street">Street</label>
                <input id="street" name="street" class="required" minlength="3" maxlength="50" type="text"/>
            </p>

            <p>
                <label for="city">City</label>
                <input id="city" name="city" class="required" minlength="3" maxlength="50" type="text"/>
            </p>

            <p id="birthdateGroup">
                <label for="birthdateDay">Birthdate</label>
                <select id="birthdateDay" name="birthdateDay" class="required">
                    <option value="">Day</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>...</option>
                </select>
                <select id="birthdateMonth" name="birthdateMonth" class="required">
                    <option value="">Month</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                <select id="birthdateYear" name="birthdateYear" class="required">
                    <option value="">Year</option>
                    <option>1950</option>
                    <option>1951</option>
                    <option>1952</option>
                    <option>1953</option>
                    <option>1954</option>
                    <option>1955</option>
                    <option>...</option>
                </select>
            </p>
        </div>
        <div id="subscriptions">
            <p>
                <label for="weekly">Weekly Newsletter</label>
                <input id="weekly" name="weekly" type="checkbox"/>
            </p>

            <p>
                <label for="updates">Product Updates</label>
                <input id="updates" name="updates" type="checkbox"/>
            </p>

            <p>
                <label for="terms">Terms and conditions</label>
                <input id="terms" name="terms" class="required" type="checkbox"/>
            </p>
        </div>
    </div>

    <input type="submit"/>
</form>


</body>
</html>